<template>
  <div style="height: 100%">
    <toast-helper></toast-helper>

    <Splitter class="splitter-class">
      <!--  页面左边部分     -->
      <SplitterPanel class="flex align-items-center justify-content-center" :size="15" :minSize="10">
        <Splitter layout="vertical">
          <!--  左上主事件操作区域   -->
          <SplitterPanel class="flex align-items-center justify-content-center" :size="60">
              <div style="width: 100%; height: 100%; overflow: auto">
               <!--    title area      -->
                <div style=
                         "background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800));
                          color: #FFFFFF; text-align: center;
                          height: 60px; line-height: 60px;
                          font-size: 1.6rem">
                    CPF Analysis System
                </div>

                <!--   upload area   -->
                <div>
                  <upload></upload>
                </div>

                <!--   running area       -->
                <div>
                    <runner></runner>
                </div>

                <!--   download area      -->
                <div>
                  <download></download>
                </div>

              </div>
          </SplitterPanel>
          <!--   左下图像选择区       -->
          <SplitterPanel :size="40">
            <Splitter>
              <SplitterPanel class="flex align-items-center justify-content-center">
                <div style="height: 100%">
                  <user-select></user-select>
                </div>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
      <!--  右侧展示区域    -->
      <SplitterPanel :size="85">
        <Splitter layout="vertical">
          <!--   右上操作提示区域       -->
          <SplitterPanel class="flex align-items-center justify-content-center" :size="15">
            <Steps :model="items" v-model:activeStep="activeStep"></Steps>
          </SplitterPanel>
          <!--   右下比对区域       -->
          <SplitterPanel :size="85">
            <Splitter>
              <SplitterPanel class="flex align-items-center justify-content-center">
                <div style="height: 100%">
                  <table-area></table-area>
                </div>
              </SplitterPanel>
            </Splitter>
          </SplitterPanel>
        </Splitter>
      </SplitterPanel>
    </Splitter>
  </div>
</template>

<script>
import Badge from 'primevue/badge'
import upload from "@/components/upload/upload";
import Splitter from 'primevue/splitter';
import SplitterPanel from 'primevue/splitterpanel';
import Card from 'primevue/card';
import Steps from 'primevue/steps';
import runner from "@/components/runner/runner";
import {mapState} from "vuex";
import ToastHelper from "@/components/toast-helper/toast-helper";
import TableArea from "@/components/table-area/table-area";
import Download from "@/components/download/download";
import UserSelect from "@/components/user-select/user-select";

export default {
  name: "framework",
  components: {
    UserSelect,
    Download,
    TableArea,
    ToastHelper,
    Splitter,
    SplitterPanel,
    upload,
    Card,
    Badge,
    Steps,
    runner
  },
  computed: {
    ...mapState("app", ['runningStep'])
  },
  watch: {
    runningStep(newVal, oldVal){
      this.activeStep = newVal
    }
  },
  mounted() {
  },
  data(){
    return {
      activeStep: 0,
      items: [
        {
          label: "Upload First"
        },
        {
          label: "Click Start Button"
        },
        {
          label: "Now Waiting"
        },
        {
          label: "Download zip"
        }
      ]
    }
  }
}
</script>

<style scoped>
.splitter-class {
  height: calc(100% - 0px)
}
</style>
